Semantic tags convey meaning about the content to browsers, search engines, and assistive technologies, while non-semantic tags only affect visual appearance without conveying any meaning.

Differences Between Semantic and Non-Semantic Tags

1
Semantic Tags: , , , <cite>, <abbr>
- Indicate meaning or importance.
- Improve accessibility and SEO.
- Can be styled with CSS for visual emphasis.
2
Non-Semantic Tags: , , 
- Only apply visual styles (bold, italic, underline).
- Do not convey meaning to assistive technologies.
- Should be combined with CSS and semantic HTML for clarity.

Example: Semantic vs Non-Semantic

In this example,  and  convey semantic meaning for assistive technologies, while  and  only change the appearance. Using CSS with semantic tags enhances both accessibility and design.

Key Takeaways

1
Semantic tags provide meaning, non-semantic tags only affect style.
2
Always prefer semantic tags for accessibility and SEO benefits.
3
CSS can enhance visual presentation without replacing semantic meaning.
4
Combine semantic HTML with CSS for both design and inclusivity.

Difficulty: 5/10

Topics: HTML semantics, accessibility, CSS styling

Scenario Questions

0-2 years experience

1
If you need to make a piece of text bold on a landing page, would you use or , and why?
2
How would you style a paragraph to look like a heading without changing the HTML markup? What are the implications?
3
What happens to screen readers when you replace a tag with a styled with font-weight:bold?

2-5 years experience

1
We have a legacy component that uses for icons and for emphasis. Users report accessibility issues. How would you refactor it?
2
During a CSS refactor, a developer changed to and the layout broke on some browsers. What could be causing that?
3
Why might a page's SEO ranking drop after replacing <h1> with a <div class='title'> styled via CSS?

5-8 years experience

1
Design a component library that enforces semantic markup while allowing flexible styling. What patterns would you use to prevent developers from falling back to non‑semantic tags?
2
Our large‑scale documentation site needs to support theming without sacrificing semantics. How would you structure the CSS and HTML to keep both concerns?
3
When migrating a monolith to a component‑based architecture, how do you handle existing non‑semantic tags to ensure accessibility and maintainability?

8+ years experience

1
At the organization level, we want to audit all HTML for semantic correctness across dozens of services. What strategy, tooling, and governance would you propose?
2
If we decide to deprecate all presentational tags (, , ) in favor of CSS, how would you plan the rollout to minimize risk and technical debt?
3
Discuss the trade‑offs of enforcing strict semantic HTML in a fast‑moving startup versus a regulated‑industry product.

Follow-up Questions

❓Can you give an example where using a non‑semantic tag caused a real bug?
❓How would you convince a team to adopt semantic markup?
❓What metrics would you track to measure the impact of this change?